<template>
  <div class="testOrder">
    <Tabs value="all" @on-click="change">
      <TabPane
        v-for="item in tabsArr"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        :data="array1"
      >
        <div class="all-content">
          <Table border :columns="columns1" :data="array1">
            <template slot-scope="{ row }" slot="order">
              <div class="expertItem">
                <img :src="row.courseCover" alt="" class="courseCover" />
                <div class="expertInfo">
                  <div>{{ row.cousrName }}</div>
                  <div v-if="row.sn">订单号：{{ row.sn }}</div>
                  <div>{{ row.buyTime }}</div>
                </div>
              </div>
            </template>
            <template slot-scope="{ row }" slot="actualPay" class="card">
              <div>{{ row.isCharge == "1" ? row.actualPay : "免费" }}</div>
            </template>
            <template slot-scope="{ row }" slot="payStatus" class="card">
              <div>
                <span
                  class="round"
                  :class="formatsearchStatus(row.payStatus)"
                ></span>
                <span>{{
                  row.payStatus == "PAID"
                    ? "交易完成"
                    : row.payStatus == "UNPAID"
                    ? "待支付"
                    : row.payStatus == "CANCEL"
                    ? "交易取消"
                    : ""
                }}</span>
              </div>
            </template>
            <template slot-scope="{ row }" slot="operation">
              <div
                v-if="row.payStatus == 'PAID' && row.isEvaluate == '1'"
                class="btn"
                @click="handelEvaluation(row)"
              >
                立即评价
              </div>

              <div class="btn2" @click="handelDetails(row)">订单详情</div>
            </template>
          </Table>
          <div class="page">
            <Page
              :total="total"
              :page-size="param.rows"
              size="small"
              show-sizer
              show-total
              show-elevator
              @on-change="currentHandle"
              @on-page-size-change="sizeChange"
            />
          </div>
        </div>
      </TabPane>
    </Tabs>

    <!-- 增加弹框 -->
    <Modal
      v-model="evaluationModal"
      title="评价"
      width="500"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <Form
        ref="form"
        :model="form"
        :rules="ruleInline"
        :label-width="120"
        style="width: 90%"
      >
        <FormItem prop="grade" label="课程评分">
          <Rate v-model="form.grade" />
        </FormItem>
        <FormItem prop="userEvaluate" label="课程评价">
          <i-input
            v-model="form.userEvaluate"
            clearable
            maxlength="500"
            :rows="5"
            show-word-limit
            type="textarea"
            placeholder="课程怎么样？快来说说学习感受吧~"
          >
          </i-input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="error" size="large" @click="submit">发表</Button>
      </div>
    </Modal>

    <!-- 详情弹框 -->
    <courseOrderDetails ref="courseOrderDetails" />
  </div>
</template>

<script>
import { myCourseOrder, courseSeriesBaseEvaluate } from "@/api/perCourseOrder";
import courseOrderDetails from "./courseOrderDetails";
export default {
  components: { courseOrderDetails },
  data() {
    return {
      evaluationModal: false,
      total: 0,
      // 表格标题
      columns1: [
        {
          title: "课程订单",
          key: "order",
          minWidth: 250,
          slot: "order",
        },
        {
          title: "实付金额",
          key: "actualPay",
          slot: "actualPay",
          align: "center",
        },
        {
          title: "价格",
          key: "unitPrice",
          align: "center",
        },
        {
          title: "状态",
          slot: "payStatus",
          key: "payStatus",
          align: "center",
        },
        {
          title: "操作",
          key: "operation",
          slot: "operation",
          align: "center",
        },
      ],
      array1: [],
      param: {
        searchStatus: null,
        page: 1,
        rows: 10,
      },
      tabsArr: [
        {
          label: "全部订单",
          name: "all",
        },
        {
          label: "交易完成",
          name: "PAID",
        },
        {
          label: "待支付",
          name: "UNPAID",
        },
        {
          label: "交易取消",
          name: "CANCEL",
        },
      ],

      form: {
        grade: 0,
        userEvaluate: "",
        courseSeriesId: "",
        userId: "",
        evaluateType: "0",
        pid: "0",
        courseOrderId: "0",
      },
      ruleInline: {},
    };
  },
  mounted() {
    this.getCourseOrderList();
  },
  methods: {
    formatsearchStatus(payStatus) {
      let str = "";

      switch (payStatus) {
        case "PAID":
          str = "orange";
          break;
        case "CANCEL":
          str = "red";
          break;
        case "UNPAID":
          str = "greenColor";
          break;

        default:
      }
      return str;
    },
    sizeChange(size) {
      this.param.pageSize = size;
      this.getCourseOrderList();
    },
    //获取当前页码
    currentHandle(current) {
      this.param.page = current;
      this.getCourseOrderList();
    },
    //跳转评价
    handelEvaluation(row) {
      this.form.courseSeriesId = row.courseSeriesId;
      this.form.courseOrderId = row.id;
      this.evaluationModal = true;
    },
    //跳转详情
    handelDetails(row) {
      this.$refs.courseOrderDetails.showFn(row);
    },
    //获取当前页码
    currentHandle(current) {
      this.param.page = current;
      this.getCourseOrderList();
    },
    getCourseOrderList() {
      this.array1 = [];
      myCourseOrder(this.param).then((res) => {
        const {
          code,
          result: { records, total },
        } = res;
        if (code == 200) {
          this.total = Number(total);
          this.array1 = records;
        }
      });
    },
    change(v) {
      this.param.searchStatus = v == "all" ? null : v;
      this.getCourseOrderList();
    },
    cancel() {
      this.evaluationModal = false;
      this.form = {
        grade: 0,
        userEvaluate: "",
        courseSeriesId: "",
        userId: "",
        evaluateType: "0",
        pid: "0",
        courseOrderId: "0",
      };
    },
    ok() {
      this.evaluationModal = false;
    },
    // 发表
    submit() {
      courseSeriesBaseEvaluate(this.form).then((res) => {
        const { code, message } = res;
        if (code == 200) {
          this.$Message.success("评价成功");
          this.getCourseOrderList();
          this.cancel();
        } else {
          this.$Message.error(message);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.testOrder {
  ::v-deep.ivu-tabs-ink-bar {
    display: none;
  }
  ::v-deep.ivu-tabs-tab {
    border: 1px solid #ededed;
    border-radius: 4px;
    background-color: #fff;
    width: calc(120 / 1920 * 100vw);
    height: calc(44 / 1920 * 100vw);
    line-height: calc(44 / 1920 * 100vw);
    font-size: calc(14 / 1920 * 100vw);
    text-align: center;
    margin-right: calc(12 / 1920 * 100vw);
    padding: 0;
    cursor: pointer;
  }
  ::v-deep.ivu-tabs-bar {
    border: none;
  }
  .ivu-tabs-nav-wrap {
    margin-bottom: 0;
  }
  ::v-deep.ivu-tabs-nav {
    margin-bottom: 2px;
  }
  ::v-deep.ivu-tabs-tab {
  }
  ::v-deep.ivu-tabs-tab-active {
    background: #fd5151;
    color: #fff;
    border: 1px solid #ededed;
  }
}

.expertItem {
  display: flex;
  height: calc(180 / 1920 * 100vw);
  align-items: center;
  .expertInfo {
    margin-left: calc(30 / 1920 * 100vw);
    margin-top: calc(20 / 1920 * 100vw);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
// 状态区分颜色
.orange {
  background: #ffb445 !important;
}
.red {
  background: #fd5151 !important;
}
.gray {
  background: #ededed !important;
}
.greenColor {
  background: #66cc33 !important;
}
.round {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #fff;
  margin-right: 5px;
}
.btn {
  cursor: pointer;
  color: #ffb445;
}

.btn2 {
  color: #515a6e;
  cursor: pointer;
  margin-top: calc(16 / 1920 * 100vw);
}
.courseCover {
  width: calc(150 / 1920 * 100vw);
  height: calc(150 / 1920 * 100vw);
}

.page {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(40 / 1920 * 100vw);
}
</style>
